<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>来设计-服务方入驻</title>
    <link rel="icon shortcut" type="image/x-icon" href="../../img/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_357896_l3xkuj4rtzz1tt9.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/common/usercommon.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/common/applycommon.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/category.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/applypage.css"/>
</head>
<body>
	<header class="apply-header">
		<div class="container clearfix">
			<div class="header-logo">
				<a href="../../index.html"></a>
			</div>
			<div class="header-nav">
				<a href="page-companyinfor.html">服务方入驻</a>
			</div>
			<div class="header-login">
				<a href="">
					<div class="icon-user"><img src="../../img/icon-user.png"/></div>
				</a>
			</div>
		</div>
	</header>
	<section class="apply-process">
		<div class="container">
			<ul class="process-list">
				<li class="process-li active">
					<div class="li-wrapper">
						<div class="process-icon iconfont icon-icon-complete1"></div>
						<a class="process-text" href="page-companyinfor.html">公司信息</a>
					</div>
				</li>
				<li class="process-li active">
					<div class="li-wrapper">
						<div class="process-icon iconfont icon-icon-edit"></div>
						<a class="process-text" href="page-category.html">专长品类</a>
					</div>
				</li>
				<li class="process-li">
					<div class="li-wrapper">
						<div class="process-icon">3</div>
						<a class="process-text" href="page-approve.html">财务及证件</a>
					</div>
				</li>
				<li class="process-li">
					<div class="li-wrapper">
						<div class="process-icon">4</div>
						<a class="process-text" href="page-case.html">上传案例</a>
					</div>
				</li>
			</ul>
		</div>
	</section>
	<section class="apply-main apply-category">
		<div class="container">
			<div class="content-main main-right">
				<h3>专长品类</h3>
				<p class="tlabel">最多可选择10个末级品类，系统将据此进行需求推荐。</p>
				<div class="lineadd-wrapper">
					<a class="line-addbtn btnafter"><i class="iconfont icon-icon-add"></i>添加专长品类</a>
				</div>
				<div class="category-list">
					<div class="list-item">
						<a class="dragbtn iconfont icon-icon-drag" title="拖拽排序"></a>
						<p class="cate">家电 - 生活小家电 - 小夜灯、缝纫机、紫外线杀菌</p>
						<div class="btnlist">
							<a class="editbtn iconfont icon-icon-edit" title="编辑"></a>
							<a class="delbtn iconfont icon-icon-delete" title="删除"></a>
						</div>
					</div>
					<div class="list-item">
						<a class="dragbtn iconfont icon-icon-drag" title="拖拽排序"></a>
						<p class="cate">家电 - 生活小家电 - 淋浴柱、手持花洒、淋浴屏、多功能花洒、头顶花洒、LED花洒、花洒软管、淋浴套装</p>
						<div class="btnlist">
							<a class="editbtn iconfont icon-icon-edit" title="编辑"></a>
							<a class="delbtn iconfont icon-icon-delete" title="删除"></a>
						</div>
					</div>
					<div class="list-item">
						<a class="dragbtn iconfont icon-icon-drag" title="拖拽排序"></a>
						<p class="cate">家电 - 生活小家电 - 淋浴柱、手持花洒、淋浴屏、多功能花洒、头顶花洒、LED花洒、花洒软管、淋浴套装</p>
						<div class="btnlist">
							<a class="editbtn iconfont icon-icon-edit" title="编辑"></a>
							<a class="delbtn iconfont icon-icon-delete" title="删除"></a>
						</div>
					</div>
					<div class="list-item">
						<a class="dragbtn iconfont icon-icon-drag" title="拖拽排序"></a>
						<p class="cate">家电 - 生活小家电 - 淋浴柱、手持花洒、淋浴屏、多功能花洒、头顶花洒、LED花洒、花洒软管、淋浴套装</p>
						<div class="btnlist">
							<a class="editbtn iconfont icon-icon-edit" title="编辑"></a>
							<a class="delbtn iconfont icon-icon-delete" title="删除"></a>
						</div>
					</div>
					<div class="list-item">
						<a class="dragbtn iconfont icon-icon-drag" title="拖拽排序"></a>
						<p class="cate">家电 - 生活小家电 - 淋浴柱、手持花洒、淋浴屏、多功能花洒、头顶花洒、LED花洒、花洒软管、淋浴套装</p>
						<div class="btnlist">
							<a class="editbtn iconfont icon-icon-edit" title="编辑"></a>
							<a class="delbtn iconfont icon-icon-delete" title="删除"></a>
						</div>
					</div>
				</div>
				<div class="footer-btnlist">
					<a class="btn graybtn">上一步</a>
					<a class="btn bgbtn">下一步</a>
				</div>
			</div>
		</div>
	</section>
</body>
<script src="../../js/common/jquery-1.12.4.min.js" ></script>
<script src="../../js/common.js" ></script>
<script src="../../js/common/usercommon.js" ></script>
<script src="../../js/common/jquery-ui.min.js"></script>
<script>
	$( function() {
		//1.拖拽排序功能初始化
	    $( ".category-list" ).sortable();
	    $( ".category-list" ).disableSelection();
	    $( ".category-list" ).on('sortupdate',function(event,ui){
	    	console.log(ui);
	    });
	    
    });
</script>
</html>